window.onload = function () {
    // 获取div元素
    var popDiv = document.getElementById("popDiv");
    var close = document.getElementById("close");
    var open = document.getElementById("open");
    var cover = document.getElementById("cover");

    open.onclick = function () {
        popDiv.style.display = "block";
        cover.style.display = 'block';
        cover.style.height = '2852px';
    }

    close.onclick = function () {
        popDiv.style.display = "none";
        cover.style.display = 'none';
        cover.style.height = document.body.clientHeight + 'px';
    }


    // 获取元素
    var input = document.getElementById("inputcode");
    // var btn = document.querySelector('button');
    var div = document.getElementById("code");
    // 搞一个字符库
    var characters = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
    var str; // str用来储存验证码的文本

    // 生成一个在[l,r]范围内的随机整数的函数
    function getRandom(l, r) {
        return parseInt(l + Math.random() * (r - l + 1));
    }

    // 设置文本不可选中
    div.addEventListener('selectstart', function (e) {
        e.preventDefault();
    })

    // 生成验证码的函数
    function run() {

        // 先重置str
        str = '';

        // 删除掉div中的所有子节点
        while (div.hasChildNodes()) {
            div.removeChild(div.firstChild);
        }

        // 生成由四个字符组成的验证码
        for (var i = 0; i < 4; i++) {

            // 创建一个span对象
            var span = document.createElement('span');

            // 设置文本（从字库中随机抽取一个字符）
            span.innerHTML = characters[getRandom(0, characters.length - 1)];

            // 设置一些随机的样式
            span.style.display = 'inline-block';
            span.style.fontSize = getRandom(16, 32) + 'px';
            span.style.color = 'rgb(' + getRandom(0, 200) + ',' + getRandom(0, 200) + ',' + getRandom(0, 200) +
                ')';
            span.style.transform = 'translate(' + getRandom(-5, 5) + 'px, ' + getRandom(-5, 5) + 'px) rotate(' +
                getRandom(-20, 20) + 'deg)';
            str += span.innerHTML; // str记录字符
            div.appendChild(span); // 将span添加到div中
        }
    }

    run(); // 每次打开/刷新页面时先调用一次
    div.addEventListener('click', run); // 每次点击验证码的时候调用一次


    //表单效验
    var sub = document.getElementById("sub");
    var hint = document.getElementById("hint");
    var login = document.getElementById("login");
    var tel = document.getElementById('tel');

    var pattern = new RegExp("^1[34578][0-9]{9}$", 'i');
    tel.onblur = function () {
        let val = tel.value;
        if (val) {
            if (pattern.test(val)) {
                hint.style.display = 'none';
            } else {
                hint.style.display = 'block';
                hint.innerHTML = "<font color='red'>手机号格式错误</font>";
            }
        }

    }

    var con = document.getElementById("consent");
    var pwd = document.getElementById("pwd");

    var pwdPattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,15}$/;

    login.onsubmit = function () {

        hint.style.display = 'block';

        if (tel.value == "") {
            hint.innerHTML = "<font color='red'>手机号不能为空</font>";
            return false;
        }

        if (pwd.value == "") {
            hint.innerHTML = "<font color='red'>密码不能为空</font>";
            return false;
        }

        if (!pwdPattern.test(pwd.value)) {
            hint.innerHTML = "<font color='red'>密码必须为6到15位字母加数字的组合</font>";
            return false;
        }


        if (input.value.toLowerCase() == "") {
            hint.innerHTML = "<font color='red'>验证码为空</font>";
            run();
            return false;
        }

        if (input.value.toLowerCase() != str.toLowerCase()) {
            hint.innerHTML = "<font color='red'>验证码错误</font>";
            run();
            return false;
        }

        if (con.checked == false) {
            hint.innerHTML = "<font color='red'>请勾选用户协议</font>";
            return false;
        }
        hint.style.display = 'none';
        return true;

    }


    var infoLogin = document.getElementById("infoLogin");
    var passwordDiv = document.getElementById("passwordDiv");
    var verificatioCode = document.getElementById("verificatioCode");
    var getTellCode = document.getElementById("getTellCode");
    var pwdLogin = document.getElementById("pwdLogin");
    var sub = document.getElementById("sub");
    var policy = document.getElementById("policy");
    infoLogin.onclick = function () {
        passwordDiv.style.display = 'none';
        verificatioCode.style.display = 'none';
        getTellCode.style.display = 'block';
        pwdLogin.style.display = 'block';
        infoLogin.style.display = 'none';
        sub.value = '登陆';
        policy.style.marginTop = '153px';
        hint.style.display = 'none';
    }

    pwdLogin.onclick = function () {
        verificatioCode.style.display = 'block';
        getTellCode.style.display = 'none';
        pwdLogin.style.display = 'none';
        infoLogin.style.display = 'block';
        passwordDiv.style.display = 'block';
        sub.value = '登陆/注册';
        policy.style.marginTop = '100px';
        hint.style.display = 'none';
    }

    con.onclick = function () {
        if (con.checked == true) {
            sub.style.backgroundColor = '#005CBF';
        } else {
            sub.style.backgroundColor = 'gray';
        }
    }

}